﻿/* UAUI preview | version:3.0.0 Corporation | CopyRight 2015-2017 动易小刘 | upload:http://uades.com/uaui/ | updated:2017/05/15 */

/* 设置布局效果 */
.container{ width: auto;}
.doc-side{ position: fixed; top: 0; left: 0; z-index: 3; float: left; width: 220px;height: 100%; overflow-y: auto;background-color: #f5f5f5;}
.doc-main{ margin-left: 220px; height: 100%; background-color: #fff;}

/*  ========== 背景-文字 ========== */
.bg-txt{ position: fixed; z-index: -1; top: 50%; right: 0; left: 0; margin: -50px 0 0 200px; text-align: center; font-size: 18px; cursor: default; filter: alpha(opacity=10);opacity: 0.1;}

/*  ========== 侧栏 ========== */

/* 侧栏-按钮 */
.sideHide{ width: 30px; height: auto;}
.side-menu-btn{ float: right; margin: 15px 10px; width: 30px; height: 30px; line-height: 30px; font-size: 16px; text-align: center;color: #fff; background-color: rgba(255, 255, 255, .1); border-radius: 4px;}
a:hover.side-menu-btn{ background-color: rgba(255, 255, 255, .2); color: #ff0;}
.fa-chevron-circle-right, .sideHide .fa-chevron-circle-left{ display: none;}
.sideHide .side-menu-btn{ margin: 0; color: #999;}
.sideHide a:hover.side-menu-btn{ color: #27b;}
.sideHide .fa-chevron-circle-right{ display: inline-block;}

/* LOGO */
.doc-side .logo{ text-align: center; padding: 10px 0; background-color: #27b; color: #fff;}
.doc-side .logo h1{ font-size: 24px;}
.doc-side .logo i{margin-right: 10px;}

/* 用户设置区 */
.user-panel{ margin: 10px 5px;overflow: hidden;}
.user-panel li{ float: left; margin: 0 3px; font-size: 12px;}
.user-panel li a{ display: inline-block; *display: inline; zoom: 1; padding: 5px; line-height: 12px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;}
.user-panel .pull-right{ margin: 0;}
.user-panel a:hover, .user-panel .active a{ color: #37b; border-color: #37b;}

/* 侧栏-菜单 */
.side-nav li{ border-top: 1px solid #ddd;}
.side-nav li h3{ padding: 10px;}
.side-nav li h5{padding: 10px 5px 10px 15px; transition: all 0.25s ease 0s; cursor: pointer;}
.side-nav li span{ float: right;}
.side-nav li i{ margin-right: 10px;}
.side-nav .sub-nav{ display: none;}
.side-nav .sub-nav a{ display: block; padding: 10px 5px 10px 30px;}
.side-nav .sub-nav a i{ position: relative; top: -3px; font-size: 8px;}
.side-nav .sub-nav a:hover{ color: #27b; background-color: #e5e5e5;}
.side-nav .active .sub-nav{ display: block;}
.side-nav .active{ background-color: #eee;}

/* 演示区 */
.doc-hd{margin: 15px 0; height: 50px; line-height: 50px; border-bottom: 1px solid #eee;transition: all 1s ease 0s; font-size: 16px;}
h1.doc-hd{ font-size: 24px;}
h2.doc-hd{ font-size: 18px;}
.doc-hd.active{padding-left: 1em;background-color: #f5f5f5;}
.doc-hd span{ display: inline-block; *display: inline; zoom: 1; padding: 0 10px; border-bottom: 1px solid #27b; color: #27b;}
.doc-example{position: relative;margin: 15px 0;padding: 39px 19px 14px;*padding-top: 19px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;overflow: hidden;}
.doc-example:after{content: "实例";position: absolute;top: -1px;left: -1px;padding: 3px 7px;font-size: 12px;font-weight: bold;background-color: #f5f5f5;border: 1px solid #ddd;color: #9da0a4;border-radius: 4px 0 4px 0;}

/* 栅格 */
.grid{ margin-bottom: 20px; overflow: hidden;}
.grid .box{ margin-top: 10px; margin-bottom: 10px; padding: 5px 10px; background-color: #eee;}

/* 多盒子 */
.box-loop{overflow: hidden;}
.box-loop .box{float: left; width: 50%;}